<template>
  <div>
    <div class="itemize">
      <div class="itemize-nav">
        <div
          class="itemize-item"
          v-for="(item, index) in itemName"
          :key="index"
          @click="changFood(index)"
        >
          <div class="itemize-box">
            <div>
              <router-link :to="itemName[index].url"
                ><img :src="item.img"
              /></router-link>
            </div>
            <div class="nav-name">
              <router-link :to="itemName[index].url">
                {{ item.name }}</router-link
              >
            </div>
          </div>
          <div class="quan-none">
            <img src="../../assets/img/sortimg/forest_in_list_bg.png" />
          </div>
        </div>
      </div>
    </div>

    <div class="all-food" v-loading="loading">
      <ul>
        <li v-for="(item, index) in allFood" :key="index">
          <div class="foodimgb" @click="queryFood(index)">
            <img :src="allFood[index].fimg" alt="" />
          </div>
          <div class="foodname" @click="queryFood(index)">
            {{ allFood[index].fname }}
          </div>
        </li>
      </ul>
    </div>

    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="20"
        :currentPage="curPage"
        @current-change="page"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { request } from "../../network/request";
export default {
  name: "AllFood",
  data() {
    return {
      allFood: "",
      itemName: [
        {
          name: "所有美食",
          url: "/sortpage",
          img: "http://juntower.top/all.svg",
        },
        {
          name: "中式菜系",
          url: "/chinesefood",
          img: "http://juntower.top/zhongshi.svg",
        },
        {
          name: "传统美食",
          img: "http://juntower.top/chuan.svg",
          url: "/traditionfood",
        },
        {
          name: "外国美食",
          img: "http://juntower.top/xican.svg",
          url: "/tianping",
        },
        {
          name: "甜品/饮品",
          img: "http://juntower.top/tianping2x.svg",
          url: "/foreignfood",
        },
      ],
      total: 0,
      indexs: "",
      curPage: 1,
      loading: true,
    };
  },
  created() {
    if (this.$route.query.page != undefined) {
      this.curPage = this.$route.query.page;
    }
    request({
      url: "/foot/queryAllFoot",
      params: {
        pageNum: this.curPage,
      },
    })
      .then((res) => {
        this.allFood = res.data.data.list;
        this.total = res.data.data.total;
        this.loading = false;
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    changFood(index) {
      this.indexs = index;
      console.log(this.itemName[index].url);
    },
    page(currentPage) {
      request({
        url: "/foot/queryAllFoot",
        params: {
          pageNum: currentPage,
        },
      })
        .then((res) => {
          this.allFood = res.data.data.list;
          this.total = res.data.data.total;
          this.$router.push({
            path: "/sortpage",
            query: {
              page: currentPage,
            },
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },

    queryFood(index) {
      this.$router.push({
        path: "/showfood",
        query: {
          fid: this.allFood[index].fid,
        },
      });
    },
  },
};
</script>

<style>
.itemize {
  margin-top: 0.8rem;
  color: rgb(60, 133, 192);
}

.itemize-nav {
  display: flex;
  width: 80%;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

.itemize-item {
  display: flex;
  cursor: pointer;
}

.nav-name {
  transition: all 0.5s;
  font-size: 0.1rem;
  cursor: pointer;
}
.nav-name a {
  text-decoration: none;
}

.itemize-item:hover .itemize-box img {
  transform: scale(1.2);
}

.itemize-item:hover .nav-name {
  transform: scale(1.2);
  margin-top: 0.1rem;
  transition: all 0.5s;
}

.itemize-box {
  width: 1rem;
  text-align: center;
  font-size: 0.2rem;
}

.itemize-box img {
  width: 0.5rem;
  height: 0.5rem;
  transition: all 0.5s;
}

.itemize-box a {
  color: black;
}

.quan-none {
  position: relative;
  margin-left: -1.01rem;
  z-index: -1;
  margin-top: -0.1rem;
  opacity: 0;
  transition: all 0.5s;
}

.itemize-box:hover + .quan-none {
  opacity: 1;
  transform: scale(1.2);
}

.quan-none img {
  width: 1rem;
  height: 1rem;
}

.all-food {
  display: flex;
  font-size: 0.11rem;
  width: 80%;
  margin: 0 auto;
  flex-wrap: wrap;
}

.all-food ul {
  width: 100%;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

.all-food ul li {
  width: 25%;
  text-align: center;
}

.foodimgb {
  margin: 0 auto;
  width: 1.8rem;
  height: 1.5rem;
  border-radius: 0.05rem;
  overflow: hidden;
  cursor: pointer;
}

.foodimgb img {
  width: 100%;
  height: 100%;
  border-radius: 0.05rem;
  transition: all 0.5s;
}

.foodimgb img:hover {
  transform: scale(1.1);
}

.foodname {
  margin-top: 0.1rem;
  margin-bottom: 0.2rem;
  cursor: pointer;
}

.foodname:hover {
  color: rgb(124, 205, 243);
}

.pagination {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 0.3rem;
  font-size: 0.2rem;
  margin-bottom: 0.2rem;
}
</style>